<template>
	<view class="">
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" v-model="title" placeholder="请输入关键词" />
					</view>
					<view class="search_btn" @tap="getData(1)">搜索</view>
				</view>

				<view class="finance_bar">
					<view>查询范围：</view>
					<picker mode="selector" :range="typeList"  @change="getType">
						<view class="finance_bar_picker">
							<view>{{typeList[typeIndex]}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="selector" :range="customerAreaList" @change="choiseArea" :value="customerAreaListIndex"
					 :data-name="'customerAreaListIndex'" >
						<view class="finance_bar_picker">
							<view>{{customerAreaList[customerAreaListIndex]}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker  v-if="isShow"  mode="selector" :range="departmentOrSelfList" @change="getBelong" :value="departmentOrSelfListIndex"
					  range-key="name">
						<view class="finance_bar_picker">
							<view>{{departmentOrSelfList[departmentOrSelfListIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<!-- <view class="finance_bar_btn">应收未完成</view> -->
				</view>

				<view class="finance_bar">
					<view>查询时间：</view>
					<picker mode="date" fields="day" @change="getStart">
						<view class="finance_bar_picker">
							<view>{{start == "" ? "请选择开始时间" : start}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="date" fields="day" @change="getEnd">
						<view class="finance_bar_picker">
							<view>{{end}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
				</view>
				
			</view>

			<view class="finance_list">
				<view class="order_item_time">总计应收¥{{receivable}}，已收¥{{received}}</view>
				<block v-for="(item,index) in list">
					<view class="finance_item" :key="index" @tap="goOrderInfo(item.id)">
						<image src="/static/images/finance_logo.png" class="finance_item_logo" v-if="item.type == '已经完成'"></image>
						<view class="finance_item_box">
							<view class="finance_item_title">
								<text>订单号：{{item.order_no}}</text>
								<text>负责人：{{item.username}}</text>
							</view>
							<view class="finance_item_price">
								<view class="finance_item_price_item">
									<view>¥{{item.total_price}}</view>
									<view class="finance_item_price_item_icon">
										<image src="/static/images/opportunity_icon1.jpg"></image>
										<view class="">应收</view>
									</view>
								</view>
								<view class="finance_item_price_item">
									<view>¥{{item.received_price}}</view>
									<view class="finance_item_price_item_icon">
										<image src="/static/images/opportunity_icon2.jpg"></image>
										<view class="">已收</view>
									</view>
								</view>
								<view class="finance_item_price_item">
									<view>¥{{item.deduct}}</view>
									<view class="finance_item_price_item_icon">
										<image src="/static/images/opportunity_icon3.jpg"></image>
										<view class="">提成</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxHide: true,
				loading: true,
				page: 1,
				typeList: [],
				userList: [],
				isShow: false,
				departmentOrSelfList: [{
						name: "自己",
						id: 1
					},
					{
						name: "本部门",
						id: 2
					},
				],
				departmentOrSelfListIndex: 1,
				customerAreaList:[],
				customerAreaListIndex:0,
				list: [],
				end: "",
				start: "",
				userIndex: 0,
				typeIndex: 0,
				title: "",
				receivable: "",
				received: 0,
				userId:0 
			}
		},
		onLoad(options) {
			this.departmentOrSelfListIndex=this.$store.getters.userInfo.branch_type != 1 ? 0 : 1;
			this.end = this.$api.getNowTime();
			this.userId = uni.getStorageSync("userId");//options.userId;
			this.$api.getOrderClass({}).then(res => {
				this.typeList = res;
				this.typeList.unshift("全部类型")
			})
			// this.$api.getUserList({}).then(res => {
			// 	let list = [];
			// 	for (let i in res) {
			// 		for (let j in res[i].user_list) {
			// 			if (res[i].user_list[j].id == uni.getStorageSync("userId")) {
			// 				res[i].user_list[j].username = "自己"
			// 				list.unshift(res[i].user_list[j])
			// 			} else {
			// 				list.push(res[i].user_list[j])
			// 			}
			// 		}
			// 	}
			// 	this.userList = list;
			// 	this.getData(1);
			// })
			this.isShow = this.$store.getters.userInfo.branch_type == 1 ? true : false;
			this.getCustomerArea();
			this.getData(1);
		},
		onShow() {

		},
		onReachBottom() {
			if (this.loading) {
				this.getData(3);
			}
		},
		methods: {
			getData(type) {
				if (type == 1) {
					this.page = 1;
					this.loading = true;
					this.list = [];
				}
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					this.boxHide = false
					let upJson = {
						page: this.page,
						user_id: this.userId,
						search: this.title, // 关键字
						belong: this.departmentOrSelfList[this.departmentOrSelfListIndex].id
					}
					if (this.start != "") {
						upJson.start = this.start;
						upJson.end = this.end
					}
					if(this.customerAreaListIndex!=0){
						upJson.area = this.customerAreaList[this.customerAreaListIndex];
					}
					
					if (this.typeIndex > 0) upJson.class = this.typeList[this.typeIndex]
					this.$api.getFinanceList(upJson).then(res => {
						this.receivable = res.receivable;
						this.received = res.received;
						console.log('res.received',res.received)
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.list = res.list;
							this.page++;
							this.loading = res.loading;
						});
					})
				})
			},
			goOrderInfo(id){ // 跳转订单详情
				uni.navigateTo({
					url: "/pages/order/info/info?id=" + id
				})
			},
			getCustomerArea(){ // 获取客户区域数据

				this.$api.getRegionList().then(res => {
					
					this.customerAreaList = res
					this.customerAreaList.splice(0,0,"全部区域")
				})

			},
			getStart(e) {
				this.start = e.detail.value;
				this.getData(1);
			},
			getEnd(e) {
				this.end = e.detail.value;
				if (this.start.length > 0) {
					this.getData(1);
				}
			},
			choiseArea(e){// 选择区域
				this.customerAreaListIndex = e.detail.value;
				if(this.customerAreaListIndex!=0){
					this.getData(1);
				}
			},
			getBelong(e){
				this.departmentOrSelfListIndex = e.detail.value;
				this.getData(1);
			},
			getType(e) {
				this.typeIndex = e.detail.value;
				this.getData(1);
			},
			getUser(e) {
				this.userIndex = e.detail.value;
				this.getData(1);
			}
		}
	}
</script>

<style>
	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}

	.finance_list {
		margin-top: 240upx;
	}

	.order_item_time {
		color: #333333;
	}

	.finance_item {
		width: 690upx;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 0 0 30upx 30upx;
		position: relative;
		overflow: hidden;
	}

	.finance_item_logo {
		width: 140upx;
		height: 140upx;
		position: absolute;
		right: -10upx;
		top: -30upx;
	}

	.finance_item_box {
		width: 100%;
	}

	.finance_item_title {
		width: 100%;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26upx;
		color: #333333;
		border-bottom: 2upx solid #EEEEEE;
	}

	.finance_item_title text:nth-child(2) {
		font-size: 22upx;
		color: #999999;
		margin-left: auto;
	}

	.finance_item_price {
		width: 100%;
		height: 130upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_item_price_item {
		width: 33%;
		font-size: 34upx;
		color: #333333;
		border-right: 2upx solid #EEEEEE;
		text-align: center;
	}

	.finance_item_price_item:last-child {
		border-right: 0upx solid #FFFFFF;
	}

	.finance_item_price_item_icon {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 10upx;
		font-size: 24upx;
		color: #9BA7B7;
	}

	.finance_item_price_item_icon image {
		width: 20upx;
		height: 20upx;
	}
</style>
